<template>
<div>
  <div style="font-size: 1.2rem;height: 3rem;
    overflow: hidden;">
    <div class="icon" style="float: left;
    margin-left: 10px;
    margin-top: 8px;">
      <van-icon name="location-o" />
    </div>
    <div class="p" style="font-size:1rem;">
      <p style="float: left;">{{name}},</p>
      <p style="float: left;margin-top: 18px;">{{tel}}</p>
      <br>
      <p class="address" style="float: left;">{{address}}</p>
    </div>
    <div style="float: right; margin-right: 10px; margin-top: 8px;" @click="goAddress">
      <van-icon name="edit" />
    </div>
  </div>
  <van-checkbox-group class="card-goods" v-model="checkedGoods" style="background:#fafafa;text-align: -webkit-left;">
      <div
        class="card-goods__item"
        v-for="item in goods"
        :key="item.id"
        :name="item.id"
      >
      <div class="hello" style="height:2rem;line-height:2rem;">
        <div class="icon">
          <van-image
            round
            width="1.5rem"
            height="1.5rem"
            style="margin-top: .15rem;"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
        <div class="p" style="margin-top:.2rem;font-size:.9rem">
          <p>{{item.dpname}}</p>
        </div>
      </div>
<van-swipe-cell>
        <van-card
          :title="item.title"
          :desc="item.desc"
          :num="item.num"
          :price="formatPrice(item.price)"
          :thumb="item.thumb"
        />
</van-swipe-cell>
      </div>
    </van-checkbox-group>
    <div style="text-align: -webkit-left;">
  </div>
    <van-submit-bar
      :price="totalPrice"
      :disabled="!checkedGoods.length"
      :button-text="submitBarText"
      @submit="onSubmit"
    />
</div>
</template>

<script>
export default {
  name: 'cartfukuang',
  data () {
    return {
      show: false,
      checkedGoods: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
      radio: '1',
      dz: '添加收货地址',
      name: '汤思文',
      tel: '18570085700',
      address: '湖南郴州苏仙',
      goods: [{
        id: '0',
        title: '进口香蕉',
        desc: '约250g，2根',
        price: 200,
        num: 1,
        thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg',
        dpname: '天猫官方旗舰店'
      }, {
        id: '1',
        title: '陕西蜜梨',
        desc: '约600g',
        price: 690,
        num: 1,
        thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg',
        dpname: '天猫官方旗舰店'
      }, {
        id: '2',
        title: '美国伽力果',
        desc: '约680g/3个',
        price: 2680,
        num: 1,
        thumb: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg',
        dpname: '天猫官方旗舰店'
      }]
    }
  },
  computed: {
    submitBarText () {
      return '提交订单'
    },
    totalPrice () {
      return this.goods.reduce((total, item) => total + (this.checkedGoods.indexOf(item.id) !== -1 ? item.price * item.num : 0), 0)
    }
  },
  methods: {
    formatPrice (price) {
      return (price / 100).toFixed(2)
    },
    onSubmit () {
      alert('点击结算')
    },
    goAddress () {
      this.$router.push('/addAddress')
    }
  }
}
</script>

<style scoped>
.card-goods {
  background-color: #fff;
  &__item {
    position: relative;
    background-color: #fafafa;
    .van-checkbox__label {
      width: 100%;
      height: auto; // temp
      padding: 0 10px 0 15px;
      box-sizing: border-box;
    }
    .van-checkbox__icon {
      top: 50%;
      left: 10px;
      z-index: 1;
      position: absolute;
      margin-top: -10px;
    }
    .van-card__price {
      color: #f44;
    }
  }
}
.hello{
    height: 3rem;
    line-height: 3rem;
    overflow: hidden;
    width: 100%;
}
.icon{
    /* width: 10%; */
    float: left;
    margin-left: 10px;
}
.p{
    text-align: left;
    /* width: 100%; */
    position: relative;
    top: -1.2rem;
    float: left;
    left: .2rem;
}
.address{
  position: relative;
    top: -34px;
    left: -53px;
}
</style>
